<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { ComponentSize } from 'element-plus'
import { userInfoStore } from '../assets/userStore/userStore';
import { MenuModel } from '../assets/models/Menu';
import MenuCard from './MenuCard.vue';
import { menuApis } from '../assets/apis/MenuApis';


const userStore = userInfoStore();
const size = ref<ComponentSize>('default');
const menuList = ref<Array<MenuModel>>();
const isEmpty = ref<boolean>(true);

onMounted(() => {
    menuApis.queryMenu(userStore.id)
        .then((value: Array<MenuModel>) => {
            if (value) {
                isEmpty.value = false;
                menuList.value = value;
            } else {
                isEmpty.value = true;
            }
        })
})

</script>

<template>
    <el-scrollbar height="100%">
        <el-empty v-show="isEmpty" description="菜单里空空如也～" />
        <el-space wrap :size="size" fill>
            <div v-for="item in menuList" :key="item.id">
                <MenuCard :menu="item" v-model="menuList" />
            </div>
        </el-space>
    </el-scrollbar>
</template>